<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui" />
	<meta name="copyright" content="ziyouziti.com" />
	<link href="/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/css/icons.css" rel="stylesheet"/>
	<link href="/css/core.css" rel="stylesheet"/>
	<link href="/css/components.css" rel="stylesheet"/>
	<link href="/css/bootstrap-table.min.css" rel="stylesheet"/>
	<link href="/css/foundation-datepicker.css" rel="stylesheet"/>
	<link href="/css/cc-base.css" rel="stylesheet" />
	<link href="/css/global.css" rel="stylesheet">
	<link href="/css/style.css" rel="stylesheet" />
	<script src="/js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/foundation-datepicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/foundation-datepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/bootstrap-table.min.js"></script>
	<script src="/js/jquery.bs-table.js"></script>
	<script src="/js/vue.js"></script>


	<!-- 引入样式 -->
	<link rel="stylesheet" href="/css/ele.css">
	<!-- 引入组件库 -->
	<script src="/js/ele.js"></script>

</head>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
	</div>
	
	<div   class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">

				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div id="atmBoApp" class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
                            <div class="box">
                            	<div class="box-title"><span>登录</span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title"><i class="cred">*</i> 用户名</span>
	                					<div class="content">
	                						<input type="text" class="form-control" v-model="username" placeholder="请输入用户名"/>
	                					</div>
	                        			<span class="title">密码</span>
	                					<div class="content">
											<input type="password" class="form-control" v-model="password" placeholder="请输入密码"/>


                						</div>
                            		</div>

                            	</div>
                            </div>
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-primary f12" @click="login"> 创建 </button>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

	<script>

		var app = new Vue({
			el : '#atmBoApp',
			data : {
				username : '',
				password : ''
			},
			methods : {
				login : function () {
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/user/login',
						data : {
							username : this.username,
							password : this.password
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							alert('登录成功');
						}
					});
				}
			}
		});




	</script>
</body>
</html>
